<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:ui="clr-namespace:MyCompany.UserInterfaceLibrary">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../ValueConverters.xaml" />
        <ResourceDictionary Source="../NamedStyles/StandardColors.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <Style TargetType="ui:NarrowButton">
        <Setter Property="Padding" Value="4,2,4,2" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <!--  Remove the ugly dotted line around the selection.  -->
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ui:NarrowButton">
                    <Grid>
                        <Grid.Background>
                            <SolidColorBrush x:Name="solidColorBrushGridBackground" Color="#00FFFFFF" />
                        </Grid.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="MouseOver">
                                    <Storyboard>
                                        <!--<DoubleAnimation Duration="0:0:0.4" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" To="1.0" />-->
                                        <ColorAnimation Duration="0:0:0.0"
                                                        Storyboard.TargetName="solidColorBrushGridBackground"
                                                        Storyboard.TargetProperty="Color"
                                                        To="#10FFFFFF" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Pressed">
                                    <Storyboard />
                                </VisualState>
                                <VisualState Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="contentPresenter"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="0.3" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup Name="FocusStates">
                                <VisualStateGroup.Transitions>
                                    <!--  Apply only in one direction:  -->
                                    <VisualTransition GeneratedDuration="0" To="Unfocused" />
                                </VisualStateGroup.Transitions>
                                <VisualState Name="Unfocused" />
                                <VisualState Name="Focused">
                                    <Storyboard>
                                        <!--  #FF73756E is ColorIDarkGrey      #FFC0C2BC  -->
                                        <ColorAnimation Duration="0:0:.2"
                                                        Storyboard.TargetName="animatedBorderBrush"
                                                        Storyboard.TargetProperty="Color"
                                                        To="Black" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Rectangle StrokeDashArray="1,2"
                                   StrokeDashCap="Round"
                                   StrokeThickness="1">
                            <Rectangle.Stroke>
                                <SolidColorBrush x:Name="animatedBorderBrush" Color="Transparent" />
                            </Rectangle.Stroke>
                        </Rectangle>

                        <!--  "border" is shown/hidden using the C# code.  -->
                        <Border x:Name="border"
                                Margin="1"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="2"
                                Padding="2" />

                        <Grid Margin="1">
                            <ContentPresenter x:Name="contentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>